<template>
  <div class="desktop">
    <div
      class="desktop-icon"
      v-for="item in deskAppConfig"
      @dblclick.native="openapp(item.appname)"
      :title="item.title"
      :ontouchstart="item.ontouchstart"
      :oncontextmenu="item.oncontextmenu"
      :appname="item.appname"
      :key="item.appname">
      <img
        :src="getAssetsFile(item.iconUrl)"
        :alt="item.appname" />
      <p>{{ item.describe }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const deskAppConfig = ref([
  {
    // ondblclick: openapp('explorer'),
    // ontouchstart: openapp('explorer'),
    title: '显示连接到此计算机的驱动器和硬件。',
    oncontextmenu: "return showcm(event,'desktop.icon',['explorer',-1]);",
    appname: 'explorer',
    iconUrl: '../assets/apps/icons/explorer/thispc.svg',
    describe: '此电脑'
  },
  {
    // ondblclick: openapp('setting'),
    // ontouchstart: openapp('setting'),
    title: '',
    oncontextmenu: "return showcm(event,'desktop.icon',['setting',-1]);",
    appname: 'setting',
    iconUrl: '../assets/icon/about.svg',
    // img: import("@/assets/icon/setting.svg").default,
    describe: '设置'
  },

  {
    // ondblclick: openapp('about'),
    // ontouchstart: openapp('about'),
    title: '',
    oncontextmenu: "return showcm(event,'desktop.icon',['about',-1]);",
    appname: 'about',
    iconUrl: '../assets/icon/about.svg',
    describe: '关于 Win12 网页版'
  },

  {
    // ondblclick: openapp('edge'),
    // ontouchstart: openapp('edge'),
    title: '',
    oncontextmenu: "return showcm(event,'desktop.icon',['edge',-1]);",
    appname: 'edge',
    iconUrl: '../assets/icon/edge.svg',
    describe: 'Microsoft Edge'
  },
  {
    // ondblclick: openapp('feedback'),
    // ontouchstart: openapp('feedback'),
    title: '',
    oncontextmenu: "return showcm(event,'desktop.icon',['feedback',-1]);",
    appname: 'feedback',
    iconUrl: '../assets/icon/feedback.svg',
    describe: '反馈中心'
  }
])

const openapp = () => {
  console.log('openapp')
}
// 动态获取assets静态资源
const getAssetsFile = (url: string | URL) => {
  return new URL(url, import.meta.url).href
}
</script>

<style lang="scss" scoped>
.desktop {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.desktop-icon {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  width: 85px;
  text-overflow: ellipsis;
  border-radius: 5px;
  text-align: center;
  margin: 8px 10px 2px 10px;
  padding: 0 3px 3px 3px;
  z-index: 3;
  cursor: pointer;
  &::after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(
      0deg,
      rgba(0, 0, 0, 0),
      rgba(255, 255, 255, 0.3),
      rgba(0, 0, 0, 0)
    );
    transform: rotate(-45deg) translate(0, -360px);
  }
  &:hover::after {
    transition: 1s ease-in-out;
    transform: rotate(-45deg) translate(0, 60px);
  }
  img {
    width: 65px;
    height: 65px;
    display: inline;
  }
  p {
    line-height: 15px;
    font-size: 13px;
    color: #fff;
    text-shadow:
      2px 2px 4px var(--sd),
      0 0 3px #000;
  }
}
</style>
